<template>
  <div>
    <p>eat: {{obj.hobby.eat}}</p>
    <button @click="obj.hobby = { eat: '🍜' }">update</button>
  </div>
</template>

<script>
import { isReactive, reactive, watch } from 'vue';

export default {
  setup() {
    const obj = reactive({
      name: 'ifer',
      hobby: {
        eat: '西瓜',
      },
    })

    // console.log(isReactive(obj))
    // console.log(isReactive(obj.hobby))

    // !#1 监听 reactive 数据，本质是对 reactive 【内部】数据的监听，对自身的修改不会触发监听
    watch(obj.hobby, (newValue, oldValue) => {
      console.log('触发~~~')
    })

    return {
      obj
    }
  }
}
</script>

<style lang="scss" scoped></style>